<script setup lang="ts">
import { h } from "vue";
import { PlusSquareOutlined } from "@ant-design/icons-vue";
import JsonEditorVue from "json-editor-vue";
import { useDark } from "@pureadmin/utils";
import { invoke } from "@tauri-apps/api/tauri";
import { notification } from "ant-design-vue";

defineOptions({
	name: "HomeAddIndexView",
});
const index = ref<string>();
const shards = ref<number>(1);
const copies = ref<number>(0);
const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const activeKey = ref("1");
const jsonContent = ref({
	mappings: {
		dynamic: "false",
		properties: {},
	},
});
const hasJsonFlag = ref(true);
const { isDark } = useDark();

const emit = defineEmits(["create-index"]);

const showModal = () => {
	open.value = true;
};

const handleOk = () => {
	confirmLoading.value = true;
	createIndex().finally(() => {
		open.value = false;
		confirmLoading.value = false;
	});
};

const jsonChange = (value: any) => {
	console.log(value);
	// 实时保存
	jsonSave(value);
};
// 保存
const jsonSave = (value: any) => {
	jsonContent.value = value;
	hasJsonFlag.value = true;
};
// 出错
const hasError = () => {
	console.log("出现错误");
	hasJsonFlag.value = false;
};

const checkJson = () => {
	if (hasJsonFlag.value === false) {
		console.log("json校验失败");
		return false;
	} else {
		console.log("json校验成功");
		return true;
	}
};
const handleCancel = () => {
	console.log("Clicked cancel button");
	open.value = false;
	initData();
};

const initData = () => {
	activeKey.value = "1";
	index.value = undefined;
	shards.value = 1;
	copies.value = 0;
	jsonContent.value = {
		mappings: {
			dynamic: "false",
			properties: {},
		},
	};
};

function createIndex() {
	return new Promise((resolve) => {
		if (checkJson()) {
			invoke("action_create_index", {
				index: index.value,
				shards: shards.value.toString(),
				replicas: copies.value.toString(),
				mapping: jsonContent.value?.mappings ? JSON.stringify(jsonContent.value.mappings) : undefined,
			})
				.then((data: any) => {
					notification.info({
						message: "创建索引结果",
						description: JSON.stringify(data, null, "\t"),
						placement: "bottomRight",
					});
					initData();
					emit("create-index");
					resolve(true);
				})
				.finally(() => {
					resolve(true);
				});
		} else {
			resolve(true);
		}
	});
}

onMounted(function () {});
</script>

<template>
	<div class="home-add-index-view">
		<a-tooltip title="创建索引" placement="bottom" color="cyan">
			<a-button type="dashed" :icon="h(PlusSquareOutlined)" @click="showModal" />
		</a-tooltip>
		<a-modal
			v-model:open="open"
			title="创建索引"
			:confirm-loading="confirmLoading"
			@ok="handleOk"
			@cancel="handleCancel"
			centered
			width="100%"
			wrap-class-name="full-modal home-add-index"
		>
			<div class="basic-info">
				<div class="font-bold mt-3 mb-3">索引名称</div>
				<a-textarea v-model:value="index" placeholder="索引名称" allow-clear :auto-size="{ minRows: 1, maxRows: 5 }" />
			</div>
			<div class="add-index-setting">
				<a-tabs v-model:activeKey="activeKey" class="h-full">
					<a-tab-pane key="1" tab="基本设置">
						<div class="w-full">
							<div class="font-bold mb-3 text-xs">分片数</div>
							<a-input v-model:value="shards" placeholder="分片数，默认为5" />
						</div>
						<div class="w-full">
							<div class="font-bold mt-3 mb-3 text-xs">副本数</div>
							<a-input v-model:value="copies" placeholder="副本数，默认为1" />
						</div>
					</a-tab-pane>
					<a-tab-pane key="2" tab="映射设置" force-render
						><div class="w-full h-full add-index-json">
							<json-editor-vue
								:class="{ 'jse-theme-dark': isDark }"
								v-model="jsonContent"
								mode="text"
								:navigationBar="false"
								:statusBar="false"
								:mainMenuBar="false"
								@has-error="hasError"
								@json-change="jsonChange"
								@json-save="jsonSave"
							/>
						</div>
					</a-tab-pane>
				</a-tabs>
			</div>
		</a-modal>
	</div>
</template>

<style scoped lang="scss">
.add-index-setting {
	flex: 1;
}
.jse-theme-dark {
	height: 100%;
}
</style>
